<template>
  <el-dialog
    width="50%"
    title="添加分类"
    :visible.sync="addCateDialogVisible"
    :before-close="addCateHandleClose">
    <!-- 添加分类表单 -->
    <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
      <el-form-item label="分类名称" prop="cat_name">
        <el-input v-model="addCateForm.cat_name" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-form-item label="父级分类">
        <el-cascader
          ref="cascader"
          v-model="selectKeys"
          :options="ParentCatelist"
          :props="{checkStrictly: true, expandTrigger: 'hover', label :'cat_name',value: 'cat_id',children:'children' }"
          @change="parentChange" clearable>
          <!-- options用来指定数据源 -->
      </el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addCateDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addCate">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'VueShopAddCate',
  props:{
    // 接收父级分类列表
    ParentCatelist:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  data() {
    return {
      // 选中的父级分类id数组
      selectKeys:[],
      // 添加分类表单对象
      addCateForm:{
        cat_name: '', // 分类名称
        cat_pid: 0,   // 分类id
        cat_level: 0, // 分类等级 默认一级分类
      },
      addCateFormRules:{
        cat_name:[
          {required: true,message:"请输入分类名称", 'trigger': 'blur'}
        ]
      },
      addCateDialogVisible:false,
    };
  },
  watch:{
    // 监听选择器变化
    selectKeys(){
      this.$refs.cascader.toggleDropDownVisible();
    }
  },
  methods: {
    // 提交添加分类请求
    addCate(){
      this.$refs.addCateFormRef.validate(async valid => {
        if(!valid) return;
        const {data:res} = await this.$http.post('categories',this.addCateForm);
        console.log(res);
        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败');
        }
        this.$message.success("添加分类成功");
        this.$emit('getCateList');
        this.selectKeys = [];
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
        this.$refs.addCateFormRef.resetFields();
        this.$refs.cascader.toggleDropDownVisible()
        this.addCateDialogVisible = false;
      })
    },
    // 监听对话框关闭 重置表单
    addCateHandleClose(){
      this.addCateDialogVisible = false;
      this.selectKeys = [];
      this.addCateForm.cat_pid = 0;
      this.addCateForm.cat_level = 0;
      this.$refs.cascader.toggleDropDownVisible()
      this.$refs.addCateFormRef.resetFields();
    },
    // 选择项发生变化立即触发
    parentChange(){
      if (this.selectKeys.length > 0 ) {
        // 父级分类id
        this.addCateForm.cat_pid =  this.selectKeys[this.selectKeys.length -1];
        // 为当前分类等级赋值 
        this.addCateForm.cat_level = this.selectKeys.length;
        return;
      }else{
        this.addCateForm.cat_pid =  0;
        // 为当前分类等级赋值 
        this.addCateForm.cat_level = 0;
      }
    },
  },
};
</script>

<style lang="less">
.el-cascader{
  width: 100%;
}
// 隐藏级联选择器前圆点
// .el-radio {
//   cursor: pointer;
//   visibility: hidden !important; // 加上这一行
//   margin-left: -20px !important;
// }
.el-cascader-panel .el-radio {
 width: 100%;
 height: 100%;
 z-index: 10;
 position: absolute;
 top: 0px;
 right: 10px;
}
// .el-cascader-node__label {
//  width: 17px;
// }
.el-cascader-panel .el-radio__input {
 visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
 top: 10px;
}
</style>